<template>
    <div class="uploadCom">
      <el-upload
        class="upload_div"
        :auto-upload="true"
        action=""
        :http-request="imageUpload"
        :show-file-list="false"
        :multiple="false">
        <el-button id="image-upload">
        </el-button>
      </el-upload>
      <quill-editor v-model="content"
                    :options="editorOption"
                    @change="onEditorChange($event)"
                    ref="QuillEditor"
      ></quill-editor>
    </div>
</template>

<script>
export default {
  name: 'Editor',
  props: ['type'],
  data () {
    return {
      content: '',
      editorOption: {
        theme: 'snow',
        modules: {
          toolbar: {
            container: [['code-block', 'blockquote'], // 引用，代码块
              ['bold', 'italic'], // 加粗，斜体，下划线，删除线
              [{'list': 'ordered'}, {'list': 'bullet'}], // 列表
              ['image'] // 上传图片、上传视频
            ],
            handlers: {
              'image': function (value) {
                if (value) {
                  // 调用element图片上传
                  document.getElementById('image-upload').click()
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      }
    }
  },
  methods: {
    async imageUpload (file) {
      var _this = this
      var host = this.$store.state.ossData.host
      var response = this.$Utils.getSignature(this.type)
      var requestData = new FormData()
      await response.then(res => {
        requestData = this.$Utils.fileUpload(file.file, res)
      })
      await this.$axios.post(host, requestData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
          _this.fileProgress = complete
          // file.onProgress({percent: complete})
        }
      })
        .then(function (response) {
          // eslint-disable-next-line eqeqeq
          if (response.status == 200) {
            _this.insertImage(host + '/' + requestData.get('key'))
          }
        })
    },
    insertImage (res) {
      // 获取富文本组件实例
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message({
          type: 'error',
          message: '图片插入失败!'
        })
      }
    },
    onEditorChange (editor) {
      this.$emit('getContent', this.content)
    },
    setContent (value) {
      this.content = value
    }
  }
}
</script>

<style >
  .uploadCom {
    background-color: #FFF;
    width: 100%;
    height: 100%;
  }
  .uploadCom .upload_div{
    display: none;
  }
  .uploadCom .quill-editor{
    height:100%;
  }
</style>
